<template>
    <div class="right-board">
    <el-tabs v-model="currentTab" class="center-tabs">
      <el-tab-pane label="配置" name="field" />
      <el-tab-pane label="数据" name="data" />
      <el-tab-pane label="参数" name="location" />
    </el-tabs>
    <div class="field-box">
      
      <el-scrollbar class="right-scrollbar">
        <!-- 组件属性 -->
        <el-form v-show="currentTab==='field'" size="small" label-width="90px">

          <el-form-item v-if="configData.layerName!==undefined" label="图层名称">
            <el-input v-model="configData.layerName" placeholder="请输入图层名称" />
          </el-form-item>
          
          <el-form-item v-if="configData.chartOption.imgURL!==undefined" label="图片地址">
            <el-input v-model="configData.chartOption.imgURL" placeholder="图片地址" />
          </el-form-item>

          <el-form-item v-if="configData.chartOption.opacity!==undefined" label="透明度">
             <el-slider v-model="configData.chartOption.opacity" :max="1" :min="0" :step="0.1"></el-slider>
          </el-form-item>

          <el-form-item v-if="configData.chartOption.rotation!==undefined" label="开启3D旋转">
            <el-switch v-model="configData.chartOption.rotation" />
          </el-form-item>

          <el-form-item  label="开启图片放大">
            <el-switch v-model="configData.chartOption.enlarge" />
          </el-form-item>

            <el-form-item label="图库">
              <image-gallary @getImg="getImg"></image-gallary>
            </el-form-item>

          <el-form-item v-if="configData.chartOption.animate!==undefined" label="载入动画">
            <el-select v-model="configData.chartOption.animate" placeholder="请选择">
              <el-option
                v-for="item in animateOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>



        </el-form>
        <!-- 表单属性 -->
        <el-form v-show="currentTab === 'data'" size="small" label-width="90px">
          <el-form-item v-if="" label="数据源类型">
            <el-select v-model="configData.chartOption.dataSourceType" placeholder="请选择">
                <el-option
                  v-for="item in dataSourceOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value">
                </el-option>
              </el-select>
          </el-form-item>

        <Databasewebsocket v-show="configData.chartOption.dataSourceType === 'websocket'" 
          :interfaceKey="configData.chartOption.interfaceKey" @getInterfaceKey="getInterfaceKey"></Databasewebsocket>
          
         <el-form-item v-show="configData.chartOption.dataSourceType === 'static'" label="静态数据值" prop="desc">
            <el-input type="textarea" :rows="20" v-model="staticDataValue"  @blur.prevent="changeStaticData()"></el-input>
          </el-form-item>

          <api-source v-show="configData.chartOption.dataSourceType === 'url'" 
            :interfaceUrl="interfaceUrl" 
            :requestMethod="configData.chartOption.requestMethod"
            :requestParameters="configData.chartOption.requestParameters"
            :token="configData.chartOption.token"
            :timeout="configData.chartOption.timeout"
            @changeApi="changeApi" ></api-source>

          <el-form-item label="通用处理" v-if="configData.chartOption.customData!==undefined" >
            <el-button type="primary" @click="editData">编辑</el-button>
          </el-form-item>

        </el-form>
        <!-- 组件位置 -->
        <el-form v-show="currentTab === 'location'" size="small" label-width="90px">
          <el-form-item label="X位置">
            <el-input-number v-model="configData.x" controls-position="right"  :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="y位置">
            <el-input-number v-model="configData.y" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="宽度">
            <el-input-number v-model="configData.width" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
          <el-form-item label="高度">
            <el-input-number v-model="configData.height" controls-position="right" :step="1"></el-input-number>
          </el-form-item>
        </el-form>
      </el-scrollbar>
    </div>
    <!-- 图库对话框 -->
    <!-- <el-dialog title="图库" :visible.sync="open" width="1000px" hight="600px" append-to-body>
      <el-form :model="queryParams" ref="queryForm" :inline="true" label-width="68px">
        <el-form-item label="所属模板">
        <el-input
            v-model="queryParams.viewTemplate"
            placeholder="请输入所属模板"
            clearable
            size="small"
            style="width: 240px"
            @keyup.enter.native="handleQuery"
        />
        </el-form-item>
        
        <el-form-item label="图片分类" prop="status">
        <el-select
            v-model="queryParams.sort"
            placeholder="图片分类"
            clearable
            size="small"
            style="width: 240px"
        >
            <el-option
            v-for="item in sortOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            />
        </el-select>
        </el-form-item>
        
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
        </el-form-item>

        <el-form-item>
            <el-button type="primary" @click="uploadOpenModel">上传<i class="el-icon-upload el-icon--right"></i></el-button>

        </el-form-item>
      </el-form> 

      <div style="overflow:auto; height:500px;">
        <ul
            class="background-images-ul"
            v-infinite-scroll="load"
            infinite-scroll-disabled="disabled">
            </li>
            <li v-for="item in uploadList" @click="selectImg(item.imagePath)" style="overflow:hidden">
              <img :src="basePath + item.imagePath" class="border_img">
              <label :title="item.name">{{ item.name }}</label>
              <span title="删除" class="drawing-item-delete" @click.stop="deleteBorder(item.uploadId)"><i class="el-icon-delete"></i></span>
            </li>
        </ul>
        <p v-if="loading" style="text-align: center;">加载中...</p>
        <p v-if="noMore" style="text-align: center;">没有更多了</p>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel">取 消</el-button>
      </div>
    </el-dialog>-->

    <!-- 添加或修改数据大屏文件上传映射对话框 -->
    <!-- <el-dialog title="上传图片" :visible.sync="uploadOpen" width="500px" append-to-body>
      <el-form ref="uploadForm" :model="uploadForm" :rules="rules"  label-width="80px">

        <el-form-item label="是否公开" prop="isOpen">
            <el-radio-group v-model="uploadForm.isOpen">
            <el-radio label="0">否</el-radio>
            <el-radio label="1">是</el-radio>
            </el-radio-group>
        </el-form-item>
        
        <el-form-item label="所属模板" prop="viewTemplate">
          <el-input v-model="uploadForm.viewTemplate" style="width: 360px" placeholder="请输入所属模板" />
        </el-form-item>

        <el-form-item label="图片分类" prop="sort">
            <el-select
            v-model="uploadForm.sort"
            placeholder="图片分类"
            clearable
            size="small"
            style="width: 360px"
        >
            <el-option
            v-for="item in sortOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
            />
        </el-select>
        </el-form-item>
        
        <el-form-item label="上传">
            <el-upload
            class="upload-demo"
            drag
            action
            :http-request="httpRequest"
            :show-file-list="false" :before-upload="beforeUpload"
            multiple>
            <i class="el-icon-upload"></i>
            </el-upload>
        </el-form-item>

      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="submitUpload">提交</el-button>
        <el-button @click="cancelUpload">取 消</el-button>
      </div>
    </el-dialog> -->
         <!-- 在线编辑器对话框 -->
    <el-dialog
      title="通用处理"
      v-if="open"
      :visible.sync="open"
      width="1000px"
      hight="900px"
      append-to-body
      :close-on-click-modal="false"
    >
      <data-editor
        :key="aceKey"
        @submitData="submitData"
        @cancelData="cancelData"
        :customData="configData.chartOption.customData==undefined?'':configData.chartOption.customData"
      ></data-editor>


    </el-dialog>
  </div>
</template>

<script>

import {animateOptions} from '../../animate/animate'
import VueEvent from '@/views/tool/datav/VueEvent'
import { listUpload, fileUpload, delUpload } from "@/api/tool/datav/fileUpload";
import { dataSourceOptions, dataBaseOptions } from '../../ComponentsConfig'
import ImageGallary from './imageGallary/imageGallary'
import Databasewebsocket from './chartDB/Databasewebsocket'
import DataEditor from "@/views/tool/datav/components/config/runcode/DataEditor";
import ApiSource from './chartDB/ApiSource'

export default {
  components: {
    ImageGallary,
    Databasewebsocket,
    DataEditor,
    ApiSource
  },
  props: ["costomData"],
  data() {
    return {
      basePath: process.env.VUE_APP_BASE_API,
      currentTab: 'field',
      configData: this.costomData,
      animateOptions,
      dataSourceOptions,
      staticDataValue: this.costomData != null ? this.costomData.chartOption.staticDataValue : '',
      interfaceUrl: this.costomData.chartOption.interfaceURL != '' ? this.costomData.chartOption.interfaceURL : '',
      requestParameters: this.costomData.chartOption.requestParameters != '' ? this.costomData.chartOption.requestParameters : '',
      aceKey:Math.random(),
      open:false,
      // open: false,
      // sortOptions: [{label:'图标', value: 1}, {label:'边框', value: 2}, {label:'按钮', value: 3}],
      // // 查询参数
      // queryParams: {
      //   pageNum: 1,
      //   pageSize: 10,
      //   type: '1',
      //   sort: undefined,
      //   viewTemplate: undefined,
      // },
      // rules: {
      //   isOpen: [
      //     { required: true, message: "是否公开不能为空", trigger: "blur" }
      //   ],
      //   sort: [
      //     { required: true, message: "所属分类不能为空", trigger: "blur" }
      //   ]
      // },
      // uploadList: [],
      // total: -1,
      // loading: false,
      // uploadOpen: false,
      // uploadForm: {},
      // fileList: []
    }
  },
  //页面加载完执行
  mounted() {
    
  },
  computed: {
     noMore () {
      if(this.total != -1) {
        return this.total == this.uploadList.length
      } else {
        return false;
      }
    },
    disabled () {
      return this.loading || this.noMore
    }
  },
  watch: {
    configData: {
      deep: true,
      handler(newVal) {
        this.$emit("costom-change", newVal);
      }
    },
    costomData: {
      deep: true,
      handler(newVal) {
        this.configData = newVal;
        this.staticDataValue = newVal.chartOption.staticDataValue;
        this.interfaceUrl = newVal.chartOption.interfaceURL;
        this.requestParameters = newVal.chartOption.requestParameters;
      }
    }
  },
  methods: {
    handleChangeX(newVal){
      
      //VueEvent.$emit('movechart',newVal,this.costomData.y,this.costomData.width,this.costomData.height)
    },
     handleChangeY(newVal){

      //VueEvent.$emit('movechart',this.costomData.x,newVal,this.costomData.width,this.costomData.height)
    },
     handleChangeWidth(newVal){

     // VueEvent.$emit('movechart',this.costomData.x,this.costomData.y,newVal,this.costomData.height)
    },
     handleChangeHeight(newVal){

     // VueEvent.$emit('movechart',this.costomData.x,this.costomData.y,this.costomData.width,newVal)
    },
    changeStaticData() {
      //如果是静态数据就给staticDataValue赋值
      if (this.configData.chartOption.isStaticData == true) {
          //this.configData.staticDataValue = JSON.parse(this.staticDataValue);
          this.$set(this.configData.chartOption, 'staticDataValue', this.staticDataValue);
      } else {
          //this.configData.interfaceURL = this.staticDataValue;
          this.$set(this.configData.chartOption, 'staticDataValue', this.staticDataValue);
      }
    },
    changeInterfaceUrl() {
      this.$set(this.configData.chartOption, 'interfaceURL', this.interfaceUrl);
    },
    changeRequestParameters() {
      this.$set(this.configData.chartOption, 'requestParameters', this.requestParameters);
    },
    changeApi(val){
      if(val.type == "interfaceUrl"){
        this.$set(this.configData.chartOption, 'interfaceURL', val.arr);
      }else if(val.type == "requestParameters"){
        this.$set(this.configData.chartOption, 'requestParameters', val.arr);
      }else if(val.type == "requestMethod"){
        this.$set(this.configData.chartOption, 'requestMethod', val.arr);
      }else if(val.type == "token"){
        this.$set(this.configData.chartOption, 'token', val.arr);
      }else if(val.type == "timeout"){
        this.$set(this.configData.chartOption, 'timeout', val.arr);
      }
    },
    // openGallery() {
    //   this.total = -1;
    //   this.uploadList = [];
    //   this.queryParams.pageNum = 1;
    //   this.open = true;
    //   this.load();
    // },
    // // 取消按钮
    // cancel() {
    //   this.open = false;
    // },
    // handleQuery() {
    //   this.total = -1;
    //   this.uploadList = [];
    //   this.queryParams.pageNum = 1;
    //   this.open = true;
    //   this.load();
    // },
    // load () {
    //   this.loading = true;
    //   listUpload(this.queryParams).then(response => {
    //     this.uploadList = this.uploadList.concat(response.rows);
    //     this.total = response.total;
    //     this.queryParams.pageNum++;
    //     this.loading = false;
    //   });
    // },
    selectImg(item) {
      this.$set(this.configData.chartOption, 'imgURL', this.basePath +item);
      //this.configData.chartOption.border = item;
      this.open = false;
    },
    // // 上传预处理
    // beforeUpload(file) {
    //   if (file.type.indexOf("image/") == -1) {
    //     this.msgError("文件格式错误，请上传图片类型,如：JPG，PNG后缀的文件。");
    //   }
    // },
    // //取消上传
    // cancelUpload() {
    //     this.uploadOpen = false;
    // },
    // uploadOpenModel() {
    //     this.uploadOpen = true;
    // },
    // //自定义上传,重写文件上传方法,覆盖原有的上传方法，将上传的文件依次添加到fileList数组中
    // httpRequest(option) {
    //     this.fileList.push(option);
    //     this.msgSuccess("成功上传至浏览器缓存");
    // },
    // submitUpload() {
    //    this.$refs["uploadForm"].validate(valid => {
    //     if (valid) {
    //         // 使用form表单的数据格式
    //       let paramsData = new FormData()
    //       // 将上传文件数组依次添加到参数paramsData中
    //       this.fileList.forEach((it, index) => {
    //         //paramsData.append(`files[${index}]`, it.file)
    //         console.log(it);
    //         paramsData.append('file', it.file); // 因为要上传多个文件，所以需要遍历一下才行
    //       });
    //       // 将表单数据添加到参数paramsData中
    //       paramsData.append('isOpen', this.uploadForm.isOpen)
    //       paramsData.append('viewTemplate', this.uploadForm.viewTemplate)
    //       paramsData.append('sort', this.uploadForm.sort)
    //       paramsData.append('type', '1')
    //       // 表单数据和文件一起上传,调用后端接口
    //       fileUpload(paramsData).then(response => {
    //         //  console.log(response);
    //         if (response.code == 200) {
    //             this.uploadOpen = false;
    //             this.fileList = [];
    //             this.uploadForm.isOpen = undefined;
    //             this.uploadForm.viewTemplate = undefined;
    //             this.uploadForm.sort = undefined;
    //             this.msgSuccess("上传成功");
    //             //重新加载上传数据
    //             this.uploadList = [];
    //             this.queryParams.pageNum = 1;
    //             this.load();
    //         }
    //       });
         
    //      }
    //   });
    // },
    // deleteBorder(uploadId){
    //   // console.log(uploadId);
    //   this.$confirm('是否确认删除该图片?', '提示', {
    //       confirmButtonText: '确定',
    //       cancelButtonText: '取消',
    //       type: 'warning'
    //     }).then(() => {
    //       delUpload(uploadId).then(response => {
    //     if (response.code === 200) {

    //       this.msgSuccess("删除成功");
    //         //重新加载上传数据
    //         this.uploadList = [];
    //         this.queryParams.pageNum = 1;
    //         this.load();
    //     } else {
    //       this.msgError(response.msg);
    //     }
    //   });
    //     }).catch(() => {
    //     this.$message({
    //       type: 'info',
    //       message: '已取消删除操作'
    //     });          
    //   });
    // },
    // pageCount (totalnum, limit) {
    //     return totalnum > 0 ? ((totalnum < limit) ? 1 : ((totalnum % limit) ? (parseInt(totalnum / limit) + 1) : (totalnum / limit))) : 0;
    // },
    getImg(val){
       this.$set(this.configData.chartOption, 'imgURL',  val);
    },
    getInterfaceKey(val){
      this.$set(this.configData.chartOption, 'interfaceKey', val);
    },
    editData(){
      this.open = true;
    },
    cancelData(){
      this.open = false;
    },
    submitData(data){
      this.$set(this.configData.chartOption, 'customData', data);
      this.open = false;
    }    
  }
}
</script>

<style lang='scss'  scoped>
/deep/ .center-tabs .el-tabs__item {
    width: 33%;
    text-align: center;
}
.background-images-ul {
    margin-bottom: 20px;
}
.background-images-ul li {
    margin: 2px;
    display: inline-block;
    width: 200px;
    line-height: 25px;
    padding: 20px;
    border: 1px solid #e2e2e2;
    font-size: 14px;
    text-align: center;
    color: #666;
    transition: all .3s;
    -webkit-transition: all .3s;
    cursor: pointer;
    position: relative;
    &:hover {
      
      & > .drawing-item-delete{
        display: initial;
      }
    }
    & > .drawing-item-copy, & > .drawing-item-delete{
      display: none;
      position: absolute;
      top: 0px;
      right: 15px;
      width: 22px;
      height: 22px;
      line-height: 20px;
      text-align: center;
      border-radius: 50%;
      font-size: 12px;
      border: 1px solid;
      cursor: pointer;
      z-index: 1;
   }
    & > .drawing-item-delete{
      right: 0px;
      border-color: #F56C6C;
      color: #F56C6C;
      background: #fff;
      &:hover{
        background: #F56C6C;
        color: #fff;
      }
  }
}
.border_img {
    width: 160px;
    height: 90px;
    object-fit: contain;
}
.background-images-ul label {
    display: inline-block;
    width: 160px;
    color: #DBEEFF;
    overflow: hidden;
}
.background-images-ul label{
  max-width: 160px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
</style>
